<script setup>
import { ref,reactive, nextTick,onActivated,getCurrentInstance,onMounted, watch  } from 'vue'; 
import { useRoute,useRouter } from 'vue-router';
import { ElMessage,ElMessageBox  } from 'element-plus';

import TopBar from '@/components/Topbar/index.vue';
import getRules from "@/validUtils";

const backValue = ref('OrderManagementIndex');
const tabName = ref("发货");

const sumbit = ()=>{

}
const form = ref({
    way:"",
    expressNumber:"",
    logisticsCompany:""
})
const addressFlag = ref(false);
const confrimAddress = ()=>{

}
const insertAddress = ()=>{
}
const editAddress = ()=>{
    addressFlag.value = true;
}
const tableLoading = ref(false);
const tableData = ref(
    [
    ]
);
const addressUuid = ref('');
const totalPage = ref(100)
const page = reactive({
    pageSize: 10,
    layout: "prev, pager, next",
    currentPage: 1,
    total: 0,
})

const handlerSearch = async (formInline)=>{
    tableLoading.value = true;
    try{
        

        tableData.value = [];
        tableLoading.value = false;
    }catch(e){
        tableLoading.value = false;
    }
}
</script>
<template>
    <div class="page-contain">
        <TopBar :backValue="backValue" :tabName="tabName">
            <template #operate>
                <el-button style="min-width: 68px">取消</el-button>
                <el-button type="primary" style="min-width: 68px" @click="sumbit">保存</el-button>
            </template>
        </TopBar>
        <div class="info-contain">
            <div class="lis-head">
                <div class="icon-view">
                    <div class="icon-view-on"></div>
                </div>
                <span class="label-name">确认订单信息</span>
            </div>
            <div class="goods-lis">
                <div class="lis-head-info">
                    <div class="left-info">
                        订单号：12345672376
                    </div>
                    <div class="right-info">
                        支付时间：2021-09-09 12:22:12
                    </div>
                </div>
                <div class="lis-body">
                    <div style="height:100%;width:calc(100% - 60px);display: flex;justify-content:flex-start;align-items:center">
                        <div class="img"></div> 
                        <div class="good-name">
                            <div class="p1">
                                [品牌]阿莫西林胶囊阿莫西林胶囊展示不下换行换1231231
                            </div>
                            <div class="p2">15g*6袋商品规格规格规格显示不下悬浮展示6袋商品规格规格规格显示不下悬浮展示</div>
                        </div>
                    </div>
                    <div style="height:100%;width:60px;box-sizing:border-box;padding:8px 0">
                        <div style="width:100%;color: #222222;font-weight: 400;font-size:14px;line-height:14px">
                            ¥25.00
                        </div>
                        <div style="width:100%;color: #909399;font-weight: 400;font-size:14px;line-height:14px;margin-top:4px">
                            x2
                        </div>
                    </div>
                </div>
            </div>
            <div class="lis-head">
                <div class="icon-view">
                    <div class="icon-view-on"></div>
                </div>
                <span class="label-name">确认发货/退货信息</span>
            </div>
            <div class="address-block">
                <div class="p1">我的发货信息：浙江省宁波市镇海区骆驼街道民和路800号九为网络科技有限公司4楼 李晓溪 13374822637
                    <img src="@/assets/icon/blue-edit-icon.png" alt="" @click="editAddress()">
                </div>
                <div class="p1">我的退货信息：浙江省宁波市镇海区骆驼街道民和路800号九为网络科技有限公司4楼 李晓溪 13374822637
                    <img src="@/assets/icon/blue-edit-icon.png" alt="" @click="editAddress()">
                </div>
            </div>
            <div class="lis-head">
                <div class="icon-view">
                    <div class="icon-view-on"></div>
                </div>
                <span class="label-name">填写发货信息</span>

            </div>
            <div class="form-contain">
                <el-form :model="form" label-width="80px" :rules="rules">
                    <el-form-item label="发货方式" :rules="getRules('select', '发货方式')" prop="way">
                        <el-radio-group v-model="form.way" class="ml-4">
                            <el-radio :label="1">货车</el-radio>
                            <el-radio :label="2">快递</el-radio>

                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="快递单号" :rules="getRules('input', '快递单号')" prop="expressNumber">
                        <el-input v-model="form.expressNumber" placeholder="请输入" style="width:260px"/>
                    </el-form-item>
                    <el-form-item label="物流公司" :rules="getRules('select', '物流公司')" prop="logisticsCompany">
                        <el-select v-model="form.logisticsCompany" placeholder="请选择"  clearable v-selectClose style="width:260px">
                            <el-option label="Zone one" value="shanghai" />
                            <el-option label="Zone two" value="beijing" />
                        </el-select> 
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <el-dialog v-model="addressFlag" title="选择地址" width="800px">
            <div style="width:100%;padding-top:14px" v-if="addressFlag">
                <div style="width:100%">
                    <el-button plain type="primary" @click="insertAddress()">
                        <img src="@/assets/icon/btn-add-blue.png" alt="" style="margin-right:8px;width:14px;height:14px">
                        从地址库新增地址
                    </el-button>
                </div>
                <div class="table-info">
                    <el-radio-group v-model="addressUuid" class="ml-4">
                        <div class="lis">
                            <div class="check">
                                <el-radio :label="1" ></el-radio>
                            </div>
                            <div class="summary">
                                浙江省宁波市镇海区骆驼街道民和路800号九为网络科技有限公司4楼 李晓溪 13374822637
                            </div>
                        </div>
                        <div class="lis">
                            <div class="check">
                                <el-radio :label="2" ></el-radio>
                            </div>
                            <div class="summary">
                               321321321312321321321312321321321312321321321312321321321312321321321312321321321312321321321312321321321312321321321312321321321312
                            </div>
                        </div>
                    </el-radio-group>
                </div>
                <div class="page">
                        <el-pagination
                        :current-page="page.currentPage"
                        :layout="page.layout"
                        :page-size="page.pageSize"
                        :total="totalPage"
                        background
                        @current-change="handlerSearch">
                    </el-pagination>
                </div>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="addressFlag = false">取消</el-button>
                    <el-button type="primary" @click="confrimAddress()">确定</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<style lang="less" scoped>
.page{
  width: 100%;
  display: flex;
  justify-content: flex-end;
  box-sizing: border-box;
  margin-top:8px;
  margin-bottom:32px;
}
.form-contain{
    width: 100%;

}
:deep(.el-radio-group){
    width: 100%;
    
}
:deep(.el-radio .el-radio__label){
    display: none;
}
.table-info{
    width: 100%;
    height: 360px;
    overflow: auto;
    .lis{
        width: 100%;
        height: 60px;
        display: flex;
        justify-content: flex-start;
        &:nth-child(odd){
            background: #F9F9F9;
        }
        &:nth-child(even){
            background: #FFFFFF;
        }
        .check{
            width: 46px;
            display: flex;
            height: 100%;
            justify-content: center;
            align-items: center;
        }
        .summary{
            width: calc(100% - 46px);
            box-sizing: border-box;
            padding-left:16px;
            line-height: 21px;
            color: #222222;
            font-weight: 400;
            font-size: 14px;
            display: flex;
            word-break: break-all;
            word-wrap: break-word;
            align-items: center;
        }
    }
}
.page-contain{
    width: 100%;
    height: 100%;
    .info-contain{
        width: 100%;
        height: calc(100% - 48px);
        box-sizing: border-box;
        padding: 16px 24px;

    }
}
.address-block{
    width: 100%;
    background: rgba(52, 128, 255, 0.05);
    height: 76px;
    box-sizing: border-box;
    padding:16px;
    margin-bottom:24px;
    .p1{
        width: 100%;
        display: flex;
        justify-content: flex-start;
        color: #222222;
        line-height: 14px;
        font-size: 14px;
        margin-bottom:13px;
        &:last-child{
            margin-bottom: 0px;
        }
        img{
            width: 16px;
            height: 16px;
            cursor: pointer;
            margin-left:4px;
        }
    }
}
.goods-lis{
    width: 100%;
    margin-bottom: 24px;
    .lis-body{
        height: 64px;
        width: 100%;
        padding:8px 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        background: #F9F9F9;
        .img{
            width: 48px;
            height: 48px;
            border:1px solid #ddd;
            border-radius: 3px;
        }
        .good-name{
            width: calc(100% - 48px);
            box-sizing: border-box;
            padding-left:8px;
            .p1{
                color:#222;
                cursor: pointer;
                font-weight: bold;
                font-size: 14px;
                width: 100%;
                line-height: 14px;
                overflow: hidden; /* 溢出隐藏，因为该多行溢出隐藏只是第n行最后显示省略号，其实n+行还是有的，要通过溢出隐藏将其藏起来不显示 */
                margin-bottom:8px;
            }
            .p2{
                color:#666666;
                font-weight: 400;
                width: 100%;
                font-size: 14px;
                line-height: 16px;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                
            }
        }
    }
    .lis-head-info{
        width: 100%;
        background: #DDDDDD;
        height: 46px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        padding:0 16px;
        .left-info{
            color: #000000;
            font-size: 14px;
            font-weight: bold;
            line-height: 14px;
        }
        .right-info{
            color: #222222;
            font-size: 14px;
            font-weight: 400;
            line-height: 14px;
        }
    }
}
.lis-head{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-bottom:16px;
    .icon-view{
        margin-right: 8px;
        position: relative;
        width: 14px;
        height: 14px;

        &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 10px;
            height: 10px;
            border-radius: 2px;
            background-color: #10E7F9; 
        }
        .icon-view-on{
            position: absolute;
            bottom: 0;
            right: 0;
            width: 10px;
            height: 10px;
            border-radius: 2px;
            background-color: #3480FF; /* 背景色 */
        }
    }
    .label-name{
        color: #000000;
        font-weight: bold;
        font-size: 14px;
        margin-right: 8px;
    }
    img{
        width: 14px;
        height: 14px;
        cursor: pointer;
    }
}
</style>